<template>
    <p>作用域插槽</p>
    <p>父组件</p>
    <h3>下面是Son组件的内容</h3>
    <Son v-slot="slotProps">
        <p>儿子的名字是 {{ slotProps.sonName }}</p>
    </Son>
    <p>Slot解构</p>
    <Son v-slot="{ sonName }">
        <p>儿子的名字是 {{ sonName }}</p>
    </Son>
    <p>具名作用域</p>
    <BobSon>
        <template v-slot:header="{sonName}">
            <p>儿子的名字是{{ sonName }}</p>
        </template>
    </BobSon>
</template>

<script>
import Son from './Son.vue';
import BobSon from './BobSon.vue';
export default {
    components: {
        Son,
        BobSon
    }
}

</script>